<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>外边距</title>
  <style>
    /*body总有一个外边距,常见操作
    h1,ul,li,a,body{
        margin: 0;
        padding: 0;
        text-decoration: none;
        margin: 0 auto; 居中
    }*/
    /* border:粗细 样式 颜色 */
    #box{
      width: 300px;
      border: 1px solid red;
      margin: 0 auto;
    }
    /*
      顺时针旋转
      margin: 0;  上下左右都为0
      margin: 0 1px;
      margin: 0 1px 2px 3px;
    */
    h2{
      font-size: 16px;
      background-color: #3cbda6;
      line-height: 30px;
      color: white;
      margin: 0 1px 2px 3px;
    }
    form{
      background: #1ec659;
    }
    input{
      border: 1px solid black;
    }
    div:nth-of-type(1){
      padding: 10px 2px;
    }
  </style>
</head>
<body>
<div id="box">
  <h2>会员登录</h2>
  <form action="#" >
    <div>
      <span>用户名:</span>
      <input type="text">
    </div>
    <div>
      <span>密码:</span>
      <input type="text">
    </div>
    <div>
      <span>邮箱:</span>
      <input type="text">
    </div>
  </form>
</div>
</body>
</html>